<template>
  <div class="modern-voice-chat">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="connection-indicator">
        <div :class="['status-dot', connectionStatus]"></div>
        <span class="status-text">{{ connectionStatusText }}</span>
      </div>
      <div class="mode-toggle">
        <button 
          :class="['mode-btn', { active: !isVoiceMode }]"
          @click="setMode(false)"
        >
          💬 文本
        </button>
        <button 
          :class="['mode-btn', { active: isVoiceMode }]"
          @click="setMode(true)"
        >
          🎤 语音
        </button>
      </div>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-area" ref="chatArea">
      <div class="messages-container">
        <!-- 欢迎消息 -->
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="ai-avatar">🤖</div>
          <div class="welcome-text">
            <h3>你好！我是你的AI语音助手</h3>
            <p>{{ isVoiceMode ? '点击麦克风开始语音对话' : '在下方输入框开始文字对话' }}</p>
          </div>
        </div>

        <!-- 消息列表 -->
        <div
          v-for="message in messages"
          :key="message.id"
          :class="['message-item', message.type]"
        >
          <div class="message-avatar">
            {{ message.type === 'user' ? '👤' : '🤖' }}
          </div>
          <div class="message-content">
            <div class="message-text">{{ message.text }}</div>
            <div class="message-meta">
              <span class="message-time">{{ formatTime(message.timestamp) }}</span>
              <button
                v-if="message.audioBase64 && message.type === 'ai'"
                @click="playMessage(message)"
                :class="['play-btn', { playing: playingMessageId === message.id }]"
              >
                {{ playingMessageId === message.id ? '⏸️' : '▶️' }}
              </button>
            </div>
          </div>
        </div>

        <!-- 加载指示器 -->
        <div v-if="isProcessing" class="message-item ai processing">
          <div class="message-avatar">🤖</div>
          <div class="message-content">
            <div class="typing-animation">
              <span></span><span></span><span></span>
            </div>
            <div class="message-text">{{ processingText }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <!-- 文本模式 -->
      <div v-if="!isVoiceMode" class="text-input-mode">
        <div class="input-container">
          <input
            v-model="textInput"
            @keyup.enter="sendTextMessage"
            placeholder="输入你的问题..."
            class="text-input"
            :disabled="isProcessing"
          />
          <button
            @click="sendTextMessage"
            :disabled="!textInput.trim() || isProcessing"
            class="send-btn"
          >
            <span v-if="isProcessing">⏳</span>
            <span v-else>➤</span>
          </button>
        </div>
      </div>

      <!-- 语音模式 -->
      <div v-else class="voice-input-mode">
        <!-- 智能通话模式 -->
        <div v-if="isSmartCallActive" class="smart-call-active">
          <div class="call-status">
            <div class="call-duration">{{ callDuration }}</div>
            <div class="call-stats">
              <span>📤 {{ audioStats.sent }}</span>
              <span>📥 {{ audioStats.received }}</span>
              <span v-if="audioStats.errors > 0" class="error">❌ {{ audioStats.errors }}</span>
            </div>
          </div>
          <button @click="endSmartCall" class="end-call-btn">
            📴 结束通话
          </button>
        </div>

        <!-- 普通语音模式 -->
        <div v-else class="voice-controls">
          <button
            @click="toggleRecording"
            :disabled="!recorder.state.value.isSupported || isProcessing"
            :class="['voice-btn', { 
              recording: recorder.state.value.isRecording,
              disabled: isProcessing 
            }]"
          >
            <div class="btn-icon">
              <span v-if="recorder.state.value.isRecording">⏹️</span>
              <span v-else>🎤</span>
            </div>
            <div class="btn-text">
              {{ recorder.state.value.isRecording ? '停止录音' : '开始录音' }}
            </div>
            <div v-if="recorder.state.value.isRecording" class="recording-duration">
              {{ recorder.formatDuration.value }}
            </div>
          </button>

          <button
            @click="startSmartCall"
            :disabled="!isConnected || isProcessing"
            class="smart-call-btn"
          >
            🎯 智能通话
          </button>
        </div>
      </div>

      <!-- 连接状态提示 -->
      <div v-if="!isConnected && isVoiceMode" class="connection-warning">
        ⚠️ WebSocket未连接，语音功能不可用
        <button @click="connectWebSocket" class="reconnect-btn">重新连接</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useAudioRecorder } from '../composables/useAudioRecorder'
import { useAudioPlayer } from '../composables/useAudioPlayer'
import { voiceChatApi, VoiceChatWebSocket, type VoiceChatRequest, type VoiceChatResponse } from '../services/api'

// 消息接口
interface ChatMessage {
  id: string
  type: 'user' | 'ai' | 'system'
  text: string
  audioBase64?: string
  timestamp: Date
}

// 响应式数据
const messages = ref<ChatMessage[]>([])
const textInput = ref('')
const isProcessing = ref(false)
const processingText = ref('正在思考...')
const isVoiceMode = ref(false)
const playingMessageId = ref<string | null>(null)
const chatArea = ref<HTMLElement>()

// WebSocket 相关
let wsClient: VoiceChatWebSocket | null = null
const isConnected = ref(false)
const connectionStatus = computed(() => isConnected.value ? 'connected' : 'disconnected')
const connectionStatusText = computed(() => isConnected.value ? '已连接' : '未连接')

// 智能通话相关
const isSmartCallActive = ref(false)
const callStartTime = ref<Date | null>(null)
const callDuration = ref('00:00')
const audioStats = ref({
  sent: 0,
  received: 0,
  errors: 0
})

// 使用组合式函数
const recorder = useAudioRecorder()
const audioPlayer = useAudioPlayer()

// 通话时长计时器
let durationTimer: number | null = null

// 更新通话时长
const updateCallDuration = () => {
  if (callStartTime.value && isSmartCallActive.value) {
    const now = new Date()
    const diff = now.getTime() - callStartTime.value.getTime()
    const minutes = Math.floor(diff / 60000)
    const seconds = Math.floor((diff % 60000) / 1000)
    callDuration.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  }
}

// 设置模式
const setMode = (voice: boolean) => {
  isVoiceMode.value = voice
  if (voice && !isConnected.value) {
    connectWebSocket()
  }
}

// 初始化WebSocket
const connectWebSocket = async () => {
  try {
    wsClient = new VoiceChatWebSocket()
    
    wsClient.on('connected', () => {
      isConnected.value = true
      addSystemMessage('✅ 语音功能已启用')
    })
    
    wsClient.on('disconnected', () => {
      isConnected.value = false
      if (isSmartCallActive.value) {
        endSmartCall()
      }
    })
    
    wsClient.on('error', (error: Error) => {
      console.error('WebSocket错误:', error)
      isConnected.value = false
      addSystemMessage('❌ 连接失败: ' + error.message)
    })
    
    // 监听语音响应（包括流式音频）
    wsClient.on('voice-response', (data: any) => {
      console.log('收到WebSocket语音响应:', data)
      
      // 处理流式音频响应
      if (data.isStreaming) {
        console.log('收到流式音频响应，大小:', data.audioBase64?.length)
        const response: VoiceChatResponse = {
          status: 'success',
          aiResponse: data.metadata?.aiResponse || '',
          recognizedText: '',
          audioBase64: data.audioBase64,
          sessionId: data.sessionId,
          processingTime: data.metadata?.processingTime || 0
        }
        handleVoiceResponse(response)
        return
      }
      
      // 处理普通响应
      if (data && data.data) {
        handleVoiceResponse(data.data)
      } else if (data.aiResponse) {
        // 直接的响应对象
        handleVoiceResponse(data)
      } else {
        console.error('WebSocket响应数据格式错误:', data)
        addSystemMessage('❌ 响应数据格式错误')
      }
    })
    
    // 监听音频流传输错误
    wsClient.on('audio_stream_error', (data: any) => {
      console.error('音频流传输错误:', data)
      addSystemMessage('❌ 音频传输失败: ' + data.error)
    })
    
    // 监听智能通话事件
    wsClient.on('simple_vad_recognized', (data: { content: string, round: number }) => {
      addUserMessage(`🎤 ${data.content}`)
    })
    
    wsClient.on('simple_vad_ai_response', (data: { content: string, round: number }) => {
      addAiMessage(data.content)
    })
    
    wsClient.on('simple_vad_audio', (data: { audioBase64: string, round: number }) => {
      audioStats.value.received++
      if (data.audioBase64) {
        playRealtimeAudio(data.audioBase64)
      }
    })
    
    wsClient.on('simple_vad_ended', () => {
      endSmartCall()
      addSystemMessage('📴 智能通话已结束')
    })
    
    await wsClient.connect()
  } catch (error) {
    console.error('WebSocket连接失败:', error)
    addSystemMessage('❌ WebSocket连接失败，将使用HTTP模式')
  }
}

// 发送文本消息
const sendTextMessage = async () => {
  if (!textInput.value.trim() || isProcessing.value) return

  const userMessage = textInput.value.trim()
  addUserMessage(userMessage)
  textInput.value = ''
  
  isProcessing.value = true
  processingText.value = '正在思考...'

  try {
    const request: VoiceChatRequest = {
      textInput: userMessage,
      sessionId: generateSessionId()
    }

    let response: VoiceChatResponse
    
    if (isConnected.value && wsClient) {
      wsClient.sendVoiceChat(request)
      return // WebSocket响应会在事件监听器中处理
    } else {
      response = await voiceChatApi.chat(request)
      handleVoiceResponse(response)
    }
  } catch (error) {
    console.error('发送消息失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    addSystemMessage('❌ 发送失败: ' + errorMessage)
  } finally {
    isProcessing.value = false
  }
}

// 切换录音状态
const toggleRecording = async () => {
  if (recorder.state.value.isRecording) {
    recorder.stopRecording()
    // 等待录音完成后发送
    setTimeout(() => {
      if (recorder.state.value.audioBlob) {
        sendVoiceMessage()
      }
    }, 500)
  } else {
    const success = await recorder.startRecording()
    if (!success) {
      addSystemMessage('❌ 录音启动失败，请检查麦克风权限')
    }
  }
}

// 发送语音消息
const sendVoiceMessage = async () => {
  if (!recorder.state.value.audioBlob) return

  addUserMessage(`🎤 语音消息 (${recorder.formatDuration.value})`)
  
  isProcessing.value = true
  processingText.value = '正在识别语音...'

  try {
    const audioBase64 = await recorder.toBase64()
    const request: VoiceChatRequest = {
      audioBase64: audioBase64,
      sessionId: generateSessionId()
    }

    let response: VoiceChatResponse
    
    if (isConnected.value && wsClient) {
      wsClient.sendVoiceChat(request)
      return
    } else {
      response = await voiceChatApi.chat(request)
      handleVoiceResponse(response)
    }
  } catch (error) {
    console.error('发送语音失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    addSystemMessage('❌ 语音发送失败: ' + errorMessage)
  } finally {
    isProcessing.value = false
    recorder.cleanup()
  }
}

// 开始智能通话
const startSmartCall = async () => {
  if (!isConnected.value) {
    addSystemMessage('❌ 请先连接WebSocket')
    return
  }

  try {
    isSmartCallActive.value = true
    callStartTime.value = new Date()
    audioStats.value = { sent: 0, received: 0, errors: 0 }
    
    // 开始计时器
    durationTimer = setInterval(updateCallDuration, 1000)
    
    // 启动智能通话
    if (wsClient) {
      const startRequest: VoiceChatRequest = {
        sessionId: generateSessionId(),
        textInput: 'simple_vad_start',
        isRealtime: true
      }
      wsClient.sendVoiceChat(startRequest)
    }
    
    addSystemMessage('🎯 智能通话已开始，请开始说话...')
  } catch (error) {
    console.error('启动智能通话失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    addSystemMessage('❌ 启动失败: ' + errorMessage)
  }
}

// 结束智能通话
const endSmartCall = () => {
  isSmartCallActive.value = false
  callStartTime.value = null
  
  if (durationTimer) {
    clearInterval(durationTimer)
    durationTimer = null
  }
}

// 处理语音响应
const handleVoiceResponse = (response: VoiceChatResponse) => {
  isProcessing.value = false
  
  if (response.status === 'success') {
    if (response.aiResponse) {
      addAiMessage(response.aiResponse, response.audioBase64)
      
      // 自动播放AI回复的语音
      if (response.audioBase64 && isVoiceMode.value) {
        setTimeout(() => {
          playAudio(response.audioBase64!)
        }, 500)
      }
    }
  } else {
    const errorMessage = response.errorMessage || '处理失败'
    addSystemMessage('❌ ' + errorMessage)
    console.error('语音响应错误:', response)
  }
}

// 播放消息音频
const playMessage = async (message: ChatMessage) => {
  if (!message.audioBase64) return
  
  if (playingMessageId.value === message.id) {
    audioPlayer.stop()
    playingMessageId.value = null
  } else {
    playingMessageId.value = message.id
    await playAudio(message.audioBase64)
    playingMessageId.value = null
  }
}

// 播放音频
const playAudio = async (base64Audio: string) => {
  try {
    await audioPlayer.playFromBase64(base64Audio, 'audio/pcm')
  } catch (error) {
    console.error('音频播放失败:', error)
  }
}

// 播放实时音频
const playRealtimeAudio = async (base64Audio: string) => {
  try {
    await audioPlayer.playFromBase64(base64Audio, 'audio/pcm')
  } catch (error) {
    console.error('实时音频播放失败:', error)
  }
}

// 添加消息的辅助函数
const addUserMessage = (text: string) => {
  messages.value.push({
    id: Date.now().toString(),
    type: 'user',
    text,
    timestamp: new Date()
  })
  scrollToBottom()
}

const addAiMessage = (text: string, audioBase64?: string) => {
  messages.value.push({
    id: Date.now().toString(),
    type: 'ai',
    text,
    audioBase64,
    timestamp: new Date()
  })
  scrollToBottom()
}

const addSystemMessage = (text: string) => {
  messages.value.push({
    id: Date.now().toString(),
    type: 'system',
    text,
    timestamp: new Date()
  })
  scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (chatArea.value) {
      chatArea.value.scrollTop = chatArea.value.scrollHeight
    }
  })
}

// 格式化时间
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 生成会话ID
const generateSessionId = () => {
  return Date.now().toString()
}

// 组件挂载
onMounted(() => {
  addSystemMessage('🤖 AI语音助手已启动，选择文本或语音模式开始对话')
})

// 组件卸载
onUnmounted(() => {
  recorder.cleanup()
  audioPlayer.cleanup()
  
  if (durationTimer) {
    clearInterval(durationTimer)
  }
  
  if (isSmartCallActive.value) {
    endSmartCall()
  }
  
  wsClient?.disconnect()
})
</script>

<style scoped>
.modern-voice-chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* 顶部状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.connection-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.9rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4757;
}

.status-dot.connected {
  background: #2ed573;
}

.mode-toggle {
  display: flex;
  gap: 0.5rem;
}

.mode-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-btn.active {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mode-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 聊天区域 */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.95);
  margin: 1rem;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.messages-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.welcome-message {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  justify-content: center;
}

.ai-avatar {
  font-size: 3rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.welcome-text h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.5rem;
}

.welcome-text p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

/* 消息项 */
.message-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.message-item.user {
  flex-direction: row-reverse;
}

.message-item.system {
  justify-content: center;
}

.message-item.system .message-content {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  text-align: center;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(102, 126, 234, 0.1);
  flex-shrink: 0;
}

.message-item.user .message-avatar {
  background: rgba(118, 75, 162, 0.1);
}

.message-content {
  max-width: 70%;
  background: white;
  border-radius: 18px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-item.user .message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.message-text {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  opacity: 0.7;
}

.play-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  border-radius: 50%;
  transition: background 0.2s;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.play-btn.playing {
  animation: pulse 1s infinite;
}

/* 处理中动画 */
.message-item.processing .message-content {
  background: rgba(102, 126, 234, 0.1);
}

.typing-animation {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.typing-animation span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #667eea;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-animation span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-animation span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 输入区域 */
.input-area {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.text-input-mode .input-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.text-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 25px;
  background: white;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.text-input:focus {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.send-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 语音模式 */
.voice-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.voice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: none;
  border-radius: 20px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.voice-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.voice-btn.recording {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  animation: pulse 2s infinite;
}

.voice-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-icon {
  font-size: 2rem;
}

.btn-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.recording-duration {
  font-size: 0.8rem;
  color: #ff4757;
  font-weight: bold;
}

.smart-call-btn {
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, #2ed573 0%, #17c0eb 100%);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(46, 213, 115, 0.3);
  transition: all 0.3s ease;
}

.smart-call-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 213, 115, 0.4);
}

/* 智能通话界面 */
.smart-call-active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.call-status {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 1rem;
  color: white;
  text-align: center;
  min-width: 200px;
}

.call-duration {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.call-stats {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  font-size: 0.9rem;
}

.call-stats .error {
  color: #ff6b6b;
  animation: pulse 2s infinite;
}

.end-call-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.end-call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

/* 连接警告 */
.connection-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 10px;
  color: #ff6b6b;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.reconnect-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ff6b6b;
  border-radius: 15px;
  background: transparent;
  color: #ff6b6b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reconnect-btn:hover {
  background: #ff6b6b;
  color: white;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modern-voice-chat {
    margin: 0;
    border-radius: 0;
  }
  
  .chat-area {
    margin: 0.5rem;
    border-radius: 15px;
  }
  
  .voice-controls {
    flex-direction: column;
  }
  
  .message-content {
    max-width: 85%;
  }
}
</style>
